<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期2</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>


<!--
    1. 当 keep-alive 缓存组件时，才会有的钩子函数： activated 和 deactivated
    2. 当子孙组件发送错误时，会调用钩子函数： errorCaptured

    keep-alive: 用来缓存组件，是Vue的内置组件。 如果组件还会再启用，辣么可以启用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要被销毁和再创建
 -->

    <keep-alive>
        <component :is="comName"></component>
    </keep-alive>
</div>

<script>

    Vue.component('login', {
        template: '<h1>登录组件</h1>',
        beforeCreate() {
            console.log("--login-- beforeCreate -- ")
        },
        created() {
            console.log("--login-- created -- ")
        },
        beforeMount() {
            console.log("--login-- beforeMount -- ")
        },
        mounted() {
            console.log("--login-- mounted -- ")
        },
        beforeUpdate() {
            console.log("--login-- beforeUpdate -- ")
        },
        updated() {
            console.log("--login-- updated -- ")
        },
        beforeDestroy() {
            console.log("--login-- beforeDestroy -- ")
        },
        destroyed() {
            console.log("--login-- destroyed -- ")
        },

        activated() {
            console.log("--login-- activated -- ")
        },
        deactivated() {
            console.log("--login-- deactivated -- ")
        },


    })

    Vue.component('register', {
        template: '<h1>注册组件</h1>',
        beforeCreate() {
            console.log("--register-- beforeCreate -- ")
        },
        created() {
            console.log("--register-- created -- ")
        },
        beforeMount() {
            console.log("--register-- beforeMount -- ")
        },
        mounted() {
            console.log("--register-- mounted -- ")
        },
        beforeUpdate() {
            console.log("--register-- beforeUpdate -- ")
        },
        updated() {
            console.log("--register-- updated -- ")
        },
        beforeDestroy() {
            console.log("--register-- beforeDestroy -- ")
        },
        destroyed() {
            console.log("--register-- destroyed -- ")
        },

        activated() {
            console.log("--register-- activated -- ")
        },
        deactivated() {
            console.log("--register-- deactivated -- ")
        },

    })

    var vm = new Vue({
        el: '#app',
        data: {
            comName: 'login'
        },

    })
</script>
</body>
</html>
